<template>
  <div class="inputwarrper" @click.self="() => closeMask()">
    <div
      class="inputCtx"
      :style="{ top: `${positiony}px`, left: `${positionx}px` }"
    >
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-button @click="clearClick" style="margin-left: 10px">清除</el-button>
      <el-button @click="confirmClick">确认</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: ["position", "search"],
  data() {
    return {
      input: "",
    };
  },
  computed: {
    positiony() {
      return this.position.y + 34;
    },
    positionx() {
      return this.position.x + 10;
    },
  },
  mounted() {},
  methods: {
    clearClick() {
      this.input = "";
    },
    confirmClick() {
      this.search(this.input);
      this.closeMask();
    },
  },
};
</script>

<style scoped lang="less">
.inputwarrper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.inputCtx {
  position: absolute;
  display: flex;
  width: 300px;
  justify-content: space-around;
}
</style>
